
<script type="text/html" data-template-name="xmpp in">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-server"><i class="fa fa-bookmark"></i> Connect as</label>
        <input type="text" id="node-input-server">
    </div>
    <div class="form-row">
        <label for="node-input-to"><i class="fa fa-envelope"></i> Buddy</label>
        <input type="text" id="node-input-to" placeholder="joe@blah.im">
    </div>
    <div class="form-row">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-join" placeholder="" style="display:inline-block; width:auto; vertical-align:top;">
        <label for="node-input-join" style="width:70%;">Is a Chat Room ?</label>
    </div>
    <div class="form-row" id="node-room-pwd">
        <label for="node-input-password"><i class="fa fa-lock"></i> Password</label>
        <input type="password" id="node-input-password" placeholder="optional room password">
    </div>
    <div class="form-tips"><b>Note:</b> By leaving Buddy empty and ticking "Is a chat room",
        the node will try to listen to all the rooms the user has access to.
        You can specify multiple rooms by separating them by a :
    </div>
</script>

<script type="text/html" data-help-name="xmpp in">
    <p>Connects to an XMPP server to receive messages.</p>
    <p>The <b>Buddy</b> field is the jid of the buddy or room you want to receive messages from. Leave blank to receive from anyone.</p>
    <p>Incoming messages will appear as <code>msg.payload</code> on the first output, while <code>msg.topic</code> will contain who it is from.
    If part of a chat room then <code>msg.room</code> may also be set.</p>
    <p>The second output will show the presence and status of a user in <code>msg.payload</code>. Again <code>msg.topic</code> will hold the users jid.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('xmpp in',{
        category: 'social-input',
        color:"#F4F492",
        defaults: {
            name: {value:""},
            server: {type:"xmpp-server",required:true},
            to: {value:""},
            join: {value:false}
        },
        credentials: {
            password: {type:"password"}
        },
        inputs:0,
        outputs:2,
        icon: "xmpp.png",
        label: function() {
            return this.name||"xmpp";
        },
        labelStyle: function() {
            return (this.name)?"node_label_italic":"";
        },
        oneditprepare: function() {
            $('#node-input-join').change(function() {
                if ($("#node-input-join").is(':checked') && $("#node-input-to").val() && $("#node-input-to").val().indexOf(':') === -1) { $("#node-room-pwd").show(); }
                else { $("#node-room-pwd").hide(); }
            });
            $('#node-input-to').change(function() {
                if ($("#node-input-join").is(':checked') && $("#node-input-to").val() && $("#node-input-to").val().indexOf(':') === -1) { $("#node-room-pwd").show(); }
                else { $("#node-room-pwd").hide(); }
            });
        }
    });
</script>


<script type="text/html" data-template-name="xmpp out">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-server"><i class="fa fa-bookmark"></i> Connect as</label>
        <input type="text" id="node-input-server">
    </div>
    <div class="form-row">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-sendObject" placeholder="" style="display:inline-block; width:auto; vertical-align:top;">
        <label for="node-input-sendObject" style="width:70%;">Send complete msg object ?</label>
    </div>
    <div class="form-row">
        <label for="node-input-to"><i class="fa fa-envelope"></i> To</label>
        <input type="text" id="node-input-to" placeholder="joe@blah.im">
    </div>
    <div class="form-row">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-join" placeholder="" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-join" style="width:70%;">Is a Chat Room ?</label>
    </div>
    <div class="form-row" id="node-room-pwd">
        <label for="node-input-password"><i class="fa fa-lock"></i> Password</label>
        <input type="password" id="node-input-password" placeholder="optional room password">
    </div>
    <div class="form-tips">The <b>To</b> field is optional. If not set uses the <code>msg.topic</code> property of the message.</div>
</script>

<script type="text/html" data-help-name="xmpp out">
    <p>Connects to an XMPP server to send messages.</p>
    <p>The <b>To</b> field is optional. If not set the <code>msg.topic</code> property of the message is used.</p>
    <p>You may also send a msg with <code>msg.presence</code> to set your presence to one of <i>chat, away, dnd</i> or <i>xa</i>.
    If you do so then the <code>msg.payload</code> will set your status message.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('xmpp out',{
        category: 'social-output',
        color:"#F4F492",
        defaults: {
            name: {value:""},
            server: {type:"xmpp-server",required:true},
            to: {value:""},
            join: {value:false},
            sendObject: {value:false}
        },
        credentials: {
            password: {type:"password"}
        },
        inputs:1,
        outputs:0,
        icon: "xmpp.png",
        align: "right",
        label: function() {
            return this.name||"xmpp";
        },
        labelStyle: function() {
            return (this.name)?"node_label_italic":"";
        },
        oneditprepare: function() {
            $('#node-input-join').change(function() {
                if ($("#node-input-join").is(':checked') && $("#node-input-to").val() && $("#node-input-to").val().indexOf(':') === -1) { $("#node-room-pwd").show(); }
                else { $("#node-room-pwd").hide(); }
            });
            $('#node-input-to').change(function() {
                if ($("#node-input-join").is(':checked') && $("#node-input-to").val() && $("#node-input-to").val().indexOf(':') === -1) { $("#node-room-pwd").show(); }
                else { $("#node-room-pwd").hide(); }
            });
        }
    });
</script>

<script type="text/html" data-template-name="xmpp-server">
    <div class="form-row">
        <label for="node-config-input-resource"><i class="fa fa-globe"></i> Resource</label>
        <input type="text" id="node-config-input-resource" placeholder="optional resource id">
    </div>
    <div class="form-row">
        <label for="node-config-input-server"><i class="fa fa-bookmark"></i> Server</label>
        <input class="input-append-left" type="text" id="node-config-input-server" placeholder="blah.im" style="width: 40%;" >
        <label for="node-config-input-port" style="margin-left: 10px; width: 35px; "> Port</label>
        <input type="text" id="node-config-input-port" placeholder="Port" style="width:45px">
    </div>
    <div class="form-row">
        <label for="node-config-input-user"><i class="fa fa-user"></i> JID</label>
        <input type="text" id="node-config-input-user" placeholder="joe@blah.im">
    </div>
    <div class="form-row">
        <label for="node-config-input-nickname"><i class="fa fa-heart"></i> Nickname</label>
        <input type="text" id="node-config-input-nickname" placeholder="Joe (optional)">
    </div>
    <div class="form-row">
        <label for="node-config-input-password"><i class="fa fa-lock"></i> Password</label>
        <input type="password" id="node-config-input-password">
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('xmpp-server',{
        category: 'config',
        defaults: {
            server: {value:"", required:false},
            port: {value:5222, required:false, validate:RED.validators.number()},
            user: {value:""},
            nickname: {value:""},
            resource: {value:""}
        },
        credentials: {
            password: {type:"password"}
        },
        label: function() {
            return this.user;
        }
    });
</script>

<script type="text/html" data-help-name="xmpp-server">
    <p>The connection to an XMPP server to send and receive messages.</p>
    <p>Connects to the standard C2S port 5222 on the server.</p>
    <p>The JID is the full username of the client used to connect to the server
    and must contain the resolvable fdqn of the server.</p>
    <p>The nickname is optional.</p>
</script>
